<template>
    <div class="monitor">
      <corner></corner>
      <home-title :title="monitorData.title"></home-title>
      <div class="container">
        <div class="widget-wrapper">
          <div class="widget-item" v-for="(item,index) of monitorData.widget" :key="index">
            <widget :item="item"></widget>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import HomeTitle from './Title'
import Widget from './Widget'
import Corner from './Corner'
export default {
  name: 'HomeMonitor',
  components: {
    HomeTitle,
    Widget,
    Corner
  },
  props: {
    monitorData: Object
  }
}
</script>
<style lang="scss">
  .monitor{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 33.33%;
    .container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
      .widget-wrapper{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        .widget-item{
          width: 50%;
          height: 50%;
          padding: 0 5px 10px 5px;
        }
      }
    }
  }
</style>